import { css, cx } from '@emotion/css';
import React, { useState } from 'react';


import { Modal, ModalTabsHeader, TabContent, Themeable2, withTheme2 } from '@grafana/ui';

interface Props extends Themeable2 {
  url?: string;
  width?: string;
  height?: string;
  title?: string;
  merror?: string;
  onDismiss(): void;
}

const UnthemedCustomModal: React.FC<Props> = (props: Props) => {
  const [isLoading, setIsLoading] = useState(true);

  const renderTitle = () => {
    const title = props.title || "";
    return (
      <ModalTabsHeader
        title={title}
        icon="share-alt"
        tabs={[]}
        activeTab=""
        onChangeTab={() => {}}
      />
    );
  };

  const handleLoad = () => {
    setIsLoading(false);
  };

  const override = {
    modalContent: css({
      ...(props.width && { width: props.width + "%" }),
    }),
    contentContent: css({
      width: '100%',
      ...(props.height && { height: props.height + "vh" }),
    }),
  };

  let url = props.url || "";

  return (
    <Modal className={cx(override.modalContent)} isOpen={true} title={renderTitle()} onDismiss={props.onDismiss}>
      <TabContent className={cx(override.contentContent)}>
        {isLoading && <div className={loadingStyles}>加载中...</div>}
        <iframe className={cx(override.contentContent)} src={url} title="customModalLink" frameBorder="0" onLoad={handleLoad} />
      </TabContent>
    </Modal>
  );
};

export const CustomModal = withTheme2(UnthemedCustomModal);

const loadingStyles = css`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #F4F5F5;
`;
